<template>
  <div class="message-quota">
    <a-spin :spinning="loading">
      <a-list item-layout="vertical" :data-source="msgList">
        <div
          v-if="showLoadingMore && msgList.length !== 0"
          slot="loadMore"
          class="loadMore tc"
        >
          <a-spin v-if="loadingMore" />
          <c-button v-else type="link" @click="onLoadMore">
            加载更多
          </c-button>
        </div>
        <a-list-item
          slot="renderItem"
          slot-scope="item, index"
          style="position: relative"
        >
          <p class="head flex flex-align-c">
            <!-- <span class="avatar edu"> -->
            <c-icon type="edu" size="16" class="warning"></c-icon>
            <!-- </span> -->
            <span class="title">{{ item.title }}</span>
          </p>
          <div class="content">
            {{ item.message }}
          </div>
          <div class="foot flex-between flex-align-c">
            <span class="date">{{ $getTime(item.createDate) }}</span>
            <div class="handle">
              <template v-if="item.auditState === msgQuota.status.review">
                <span
                  class="btn danger"
                  @click="reject(item)"
                  v-if="$verifyBtn('msgQuotaReject')"
                  >拒绝</span
                >
                <a-divider type="vertical" />
                <span
                  class="btn warning"
                  @click="updateQuotaDrawer(item, index)"
                  v-if="$verifyBtn('msgQuotaEdit')"
                  >修改</span
                >
                <a-divider type="vertical" />
                <span
                  class="btn success"
                  @click="agree(item)"
                  v-if="$verifyBtn('msgQuotaAgree')"
                  >同意</span
                >
              </template>
              <template v-if="item.auditState === msgQuota.status.agree">
                <span class="success">已同意</span>
              </template>
              <template v-if="item.auditState === msgQuota.status.reject">
                <span class="danger">已拒绝</span>
              </template>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-spin>
    <c-modal
      v-model="updateQuotaVisible"
      title="编辑额度"
      :width="400"
      @ok="updateQuota"
      @cancel="restUpdateQuotaInfo"
      destroyOnClose
    >
      <c-form
        :data="updateQuotaFormData"
        v-model="updateQuotaForm"
        :rules="updateQuotaFormRules"
        ref="updateQuotaForm"
        :col="{ labelCol: { style: 'width: 100px;' } }"
      >
      </c-form>
    </c-modal>
  </div>
</template>

<script>
import { getCreditMsg } from "@/api/message";
import { approveCredit, updateprovidercredit } from "@/api/quota";
import msg from "@/dict/message";

const updateQuotaFormData = [
  {
    label: "额度类型",
    prop: "type",
    type: "text"
  },
  {
    label: "添加对象",
    prop: "companyName",
    type: "text"
  },
  {
    label: "商品品种",
    prop: "categoryName",
    type: "text"
  },
  {
    label: "合约月",
    prop: "contractCode",
    type: "text"
  },
  {
    label: "已用额度",
    prop: "usedCredit",
    type: "text"
  },
  {
    label: "可用额度",
    prop: "availableCredit",
    type: "text"
  },
  {
    label: "增加额度",
    prop: "updateQuotaAmount",
    // slot: "updateQuotaAmount"
    type: "number",
    max: 999999
  }
];

export default {
  data() {
    return {
      msgList: [], // 订单消息列表
      loading: true,
      loadingMore: false,
      pageNum: 1,
      total: undefined,
      updateQuotaVisible: false, // 控制修改额度弹窗显隐
      updateQuotaFormData,
      updateQuotaData: {},
      updateQuotaForm: {
        type: "采购额度",
        companyName: undefined,
        categoryName: undefined,
        contractCode: undefined,
        usedCredit: undefined,
        availableCredit: undefined,
        updateQuotaAmount: undefined
      },
      updateQuotaFormRules: {
        updateQuotaAmount: [
          { required: true, message: "请输入需要增加的额度", trigger: "change" }
        ]
      },
      creditRequestId: undefined
    };
  },
  computed: {
    showLoadingMore() {
      return this.msgList.length !== this.total;
    },
    msgQuota() {
      return msg.quota;
    }
  },
  methods: {
    // 修改额度弹窗关闭后重置信息
    restUpdateQuotaInfo() {
      this.creditRequestId = undefined;
      this.updateQuotaForm = {
        type: "采购额度",
        companyName: undefined,
        categoryName: undefined,
        contractCode: undefined,
        usedCredit: undefined,
        availableCredit: undefined,
        updateQuotaAmount: undefined
      };
    },
    // 打开修改额度弹窗
    updateQuotaDrawer(row) {
      this.updateQuotaData = row;
      this.updateQuotaVisible = true;
      this.creditRequestId = row.creditRequestId;
      this.updateQuotaForm.companyName = row.creditApproval.requestCompanyName;
      this.updateQuotaForm.categoryName = row.creditApproval.categoryName;
      this.updateQuotaForm.contractCode =
        row.creditApproval.futuresContractCode;
      this.updateQuotaForm.usedCredit = row.creditApproval.usedCredit;
      this.updateQuotaForm.availableCredit = row.creditApproval.availableCredit;
    },
    // 修改额度
    updateQuota() {
      this.$refs.updateQuotaForm.validated().then(() => {
        updateprovidercredit({
          creditRequestId: this.creditRequestId,
          companyId: this.updateQuotaData.creditApproval.requestCompanyId,
          categoryId: this.updateQuotaData.creditApproval.categoryId,
          futuresContractCode: this.updateQuotaData.creditApproval
            .futuresContractCode,
          businessDirection: 1,
          creditAmount: this.updateQuotaForm.updateQuotaAmount,
          version: this.updateQuotaData.creditApproval.version
        }).then(() => {
          this.msgList.forEach(item => {
            if (item.id === this.updateQuotaData.id) {
              item.auditState = 1;
            }
          });
          this.$message.success("操作成功");
          this.updateQuotaVisible = false;
        });
      });
    },
    // 拒绝
    reject(row) {
      this.approveCredit(
        {
          creditRequestId: row.creditRequestId,
          auditState: 2
        },
        row
      );
    },
    // 同意
    agree(row) {
      this.approveCredit(
        {
          creditRequestId: row.creditRequestId,
          auditState: 1
        },
        row
      );
    },
    // 审核额度
    approveCredit(params, row) {
      approveCredit(params).then(() => {
        this.msgList.forEach(item => {
          if (item.id === row.id) {
            item.auditState = params.auditState;
          }
        });
        this.$message.success("操作成功");
        this.updateQuotaVisible = false;
      });
    },
    // 刷新消息
    reload() {
      this.loading = true;
      this.pageNum = 1;
      this.getQuotaList("reload");
    },
    // 全部已读
    readAll() {},
    // 获取额度消息列表
    getQuotaList(type) {
      getCreditMsg({
        pageNum: this.pageNum,
        pageSize: 10
      })
        .then(res => {
          if (res) {
            if (type === "reload") this.msgList = []; // 刷新消息需要先清空消息列表
            this.msgList = res.pageData
              ? this.msgList.concat(res.pageData)
              : [];
            this.total = res.total;
          }
        })
        .finally(() => {
          if (this.loading) {
            this.loading = false;
            this.$emit("reloadFinish", "quota");
          } else {
            this.loadingMore = false;
          }
        });
    },
    //   加载更多
    onLoadMore() {
      this.loadingMore = true;
      this.pageNum++;
      this.getQuotaList();
    }
  },
  created() {
    this.getQuotaList();
  }
};
</script>

<style lang="scss" scoped>
// .avatar.edu {
//   background-color: var(--warning);
// }
.drawer-updateQuota {
  .ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
    box-shadow: none;
  }
}
</style>
